//--map- -
sky.define(['sky/dom/dom'],function(require,exports){
    var U = require('util');
    var E = require('emitter');
    var $ = require('sky/dom/dom');

    var keybar = 'sky-kite';

    var panelStr = [
        '<div class="rel">',
        '<div class="searchbar">',
        '<div class="ipt">',
        '<input '+keybar+'="filter" placeholder="请输入关键字筛选" type="text" />',
        '<i class="fa fa-search"></i>',
        '</div>',
        '</div>',
        '<div class="elect" '+keybar+'="list_all"></div>',
        '</div>'
    ].join('');

    function stop(){
        if(this.$ && $.css(this.$,'display') != 'none'){
            var ev = $.getEvent();
            ev.preventDefault();
            ev.stopPropagation();
        }
    }

    var showPanel;
    function hidePanel(){
        if(showPanel){
            showPanel.hide();
            showPanel = null;
        }
    }

    $.appendEvent(document,'vdown',hidePanel);
    $.appendEvent(document,'vkeyesc',hidePanel);

    function getLiValue(data, key, flag){
        if(!data){
            return '';
        }
        var v = key == null?data:data[key];
        if(flag){
            return U.htmlEncode(v);
        }
        return v;
    }

    function filter(){
        var root = this;
        var str = U.trim(root.$$.filter.value);
        if(str !== root._ipt_value){
            root._ipt_value = str;
            var elected = root.elected && root.elected.getAttribute('sky-live-data') || '-1';
            $.html(this.$$.list_all,U.forEach(root.data,function(m,i){
                var v = getLiValue(m, root.key, true);
                if(!str || v.indexOf(str) >= 0){
                    return '<div class="li' + (elected == i?' checked':'') + '" sky-live-fn="elect" sky-live-data="' + i + '"><span>' + v + '</span></div>';
                }
                return '';
            },[]).join(''));
            root.active = -1;
        }
    }

    function elect(root,index, me){
        if(root.elected && root.elected.getAttribute('sky-live-data') == index){
            root.hide();
            return ;
        }
        if(root.elected){
            $.removeClass(root.elected,'checked');
        }
        root.elected = me;
        $.addClass(me,'checked');

        root.ipt.value = getLiValue(root.get(),root.key);

        root.emit('change', index);
        root.hide();
    }

    function live_elect(index){
        elect(this.root,index,$.getEvent().eTarget);
    }

    function filter_keydown(){
        var code = $.getEvent().keyCode;
        if(code == 13){
            // 确定使用
            if(this.active){
                elect(this,this.active.getAttribute('sky-live-data'),this.active);
            }
            return ;
        }

        if(code == 38 || code == 40){
            // 上移一个 或者 下移一个
            if(this.active){
                $.removeClass(this.active, 'active');
            }
            if(code == 40){
                this.active = this.active.nextElementSibling;
                if(!this.active){
                    this.active = this.$$.list_all.firstChild;
                }
            }
            else{
                this.active = this.active.previousElementSibling;
                if(!this.active){
                    this.active = this.$$.list_all.lastChild;
                }
            }
            $.addClass(this.active, 'active');
            return ;
        }
    }

    var panel = U.extend(E, {
        show:function(){
            if(showPanel == this){
                return this;
            }
            var offset = $.offset(this.iptFor);
            $.css(this.$,{left:offset.left + 'px',top:(offset.top + offset.height + 2) + 'px', width:(offset.width - 2) + 'px'});

            hidePanel();
            showPanel  = this;
            $.show(this.$);

            var filter = this.$$.filter;
            setTimeout(function(){
                filter.focus();
            },10);

            this.emit('show');
            return this;
        },
        hide:function(){
            $.hide(this.$);
            this.emit('hide');
            if(this == showPanel){
                showPanel = null;
            }
            return this;
        },
        get:function(index){
            if(index){
                return this.data[index];
            }
            if(this.elected){
                return this.data[this.elected.getAttribute('sky-live-data')];
            }
            return null;
        }
    },function(ipt,data,key){
        var _stop = U.bind(stop,this);
        this._show = U.bind(this.show,this);
        var ipt = this.ipt = $(ipt);
        this.iptFor = $(ipt.getAttribute('for_panel')) || ipt;
        var forShow = ipt.getAttribute('for_show');
        if(forShow){
            $.get(forShow).appendEvent('vclick',this._show).appendEvent('vdown',_stop);
        }

        var r = this.$ = $.create('div',{className:'sky-elect-down'},panelStr,document.body);
        $.hide(r);
        var $$ = this.$$ = {};
        $.get('[' + keybar + ']',r).forEach(function(){
            $$[this.getAttribute(keybar)] = this;
        });
        this.data = data;
        this.key = key;
        this.elected = null;
        this.active = null;

        var live = $.eLive(r);
        live.root = this;
        live.on('elect',live_elect);

        $.appendEvent(r, 'vdown', _stop);
        $.appendEvent(ipt, 'focus', this._show);
        $.appendEvent(ipt, 'vdown', _stop);
        $.appendEvent(ipt, 'vclick', this._show);

        //筛选
        $.appendEvent($$.filter, 'input', U.bind(filter,this));
        $.appendEvent($$.filter, 'keydown', U.bind(filter_keydown,this));

        filter.call(this);
    });

    exports.BaseClass = panel;
    exports.create = function(ipt,data,key){
        return new panel(ipt,data,key);
    }
});